<template>
  <div class="play-music">
    <div class="bg" :style="{backgroundImage: `url(${songDetail.picUrl})`}"></div>
    <div class="play-top">
      <div class="back" @click="$emit('back')">
        <img src="../assets/back.png" alt="">
      </div>
      <div class="center">
        <div class="title" style="color: #333;">{{songDetail.name}}</div>
      </div>
      <div class="share">
        <img src="../assets/share.png" alt="">
      </div>
    </div>
    <div class="play-content" v-show="!isLyric" @click="isLyric = !isLyric">
      <img src="../assets/needle-ip6.png" alt="" class="needle" :class="pause ? 'active' : ''">
      <img src="../assets/circle.png" alt="" class="disc">
      <img :src="songDetail.picUrl" alt="" class="playImg">
    </div>
    <!-- 歌词 -->
    <div class="play-lyric" v-show="isLyric" @click="isLyric = !isLyric">
      <p v-for="(item,index) in songDetail.lyric" :key="index" :class="item.time <= currentPlayTime*1000 && item.next >= currentPlayTime*1000 ? 'active' :''">{{item.content}}</p>
    </div>
    <div class="progress"></div>
    <div class="play-footer">
      <img src="../assets/circulation.png" alt="">
      <img src="../assets/prev.png" alt="">
      <img src="../assets/play.png" alt="" class="play" v-if="pause" @click="play">
      <img src="../assets/pause.png" alt="" class="play" v-else @click="play">
      <img src="../assets/next.png" alt="">
      <img src="../assets/list.png" alt="">
    </div>
  </div>
</template>

<script>
import { toRefs, watch, getCurrentInstance, reactive, ref } from 'vue'

export default {
  props: ['curSongId', 'pause', 'play', 'currentPlayTime'],
  setup(props) {
    /**
     * @param {prop} curSongId, pause, play
     * @param {object} songDetail 歌曲的一些信息
     * @param {boolean} isLyric 控制歌词显示和隐藏
     */
    const { curSongId, pause, play, currentPlayTime } = toRefs(props)
    const { proxy } = getCurrentInstance()
    const songDetail = reactive({ lyric: '' })
    const isLyric = ref(true)

    // Todo: 根据时间滚动歌词
    // 思路：可以根据audio的currentTime属性获得当前音乐播放的时间（audio自带timeUpdate，也可以这样使用）ok
    // 使用setInterval间隔一段时间监听时间，播放暂停的时候可以在play函数中控制

    watch(
      curSongId,
      (newVal, old) => {
        // console.log(newVal)
        // console.log(old)
        proxy.$http.get(`/song/detail?ids=${newVal}`).then(res => {
          if (res.code === 200) {
            // console.log(res)
            songDetail.picUrl = res.songs[0].al.picUrl
            songDetail.name = res.songs[0].name
          }
        })
        proxy.$http.get(`/lyric?id=${newVal}`).then(res => {
          if (res.code === 200) {
            // console.log(res.lrc.lyric)
            let lyric = res.lrc.lyric
            let content = lyric.split(/\n/gis).map(ele => {
              return {
                min: ele.slice(1, 3),
                second: ele.slice(4, 6),
                mill: ele.slice(7, 10),
                time: parseInt(ele.slice(7, 10)) + parseInt(ele.slice(4, 6)) * 1000 + parseInt(ele.slice(1, 3)) * 60 * 1000,
                content: ele.slice(11)
              }
            })
            content.forEach((ele, index) => {
              switch (index) {
                case content.length - 1:
                  ele.next = content[index].time
                  break

                default:
                  ele.next = content[index + 1].time
                  break
              }
            })
            // console.log(content)
            songDetail.lyric = content
          }
        })
      },
      { immediate: true }
    )
    return {
      songDetail,
      pause,
      play,
      isLyric,
      currentPlayTime
    }
  }
}
</script>

<style lang="less" scoped>
.play-music {
  position: fixed;
  // display: none;
  left: 0;
  top: 0;
  width: 7.5rem;
  height: 100vh;
  background-color: #000;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 7.5rem;
    height: 100vh;
    background-size: auto 100%;
    background-position: center;
    filter: blur(60px);
  }
  .play-top {
    width: 7.5rem;
    height: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    left: 0;
    top: 0;
    color: #cbcbcb;
    padding: 0 0.2rem;
    .back img,
    .share img {
      width: 0.8rem;
      height: 0.8rem;
    }
    .center {
      height: 1.2rem;
      line-height: 1.2rem;
      overflow: auto;
      white-space: nowrap;
    }
  }
  .play-content {
    position: relative;
    .needle {
      width: 2.5rem;
      height: auto;
      position: absolute;
      left: 50%;
      transform: rotate(10deg);
      transform-origin: 0.3rem 0;
      transition: all 1s;
      z-index: 100;
    }
    .active {
      transform: rotate(-8deg);
    }
    .disc {
      width: 5.5rem;
      height: auto;
      position: absolute;
      left: 50%;
      top: 2rem;
      transform: translateX(-50%);
      z-index: 10;
    }
    .playImg {
      width: 3.5rem;
      height: 3.5rem;
      position: absolute;
      border-radius: 50%;
      top: 3rem;
      left: calc(50% - 1.75rem);
    }
  }
  .play-footer {
    width: 7.5rem;
    height: 1.5rem;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.4rem;
    img {
      width: 0.5rem;
      height: 0.5rem;
    }
    .play {
      width: 0.8rem;
      height: 0.8rem;
    }
  }
  .play-lyric {
    position: absolute;
    width: 7.5rem;
    height: calc(100% - 4rem);
    text-align: center;
    font-size: 0.35rem;
    color: #fff;
    margin-top: 0.5rem;
    overflow: scroll;
    p {
      margin-top: 0.1rem;
    }
    .active {
      color: rgb(1, 101, 171);
      font-weight: 600;
    }
  }
}
</style>